<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Примеры к статье "jQuery-скрипт для стилизации селектов html-форм"</title>
    <link href="selectbox.css" rel="stylesheet"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="jquery.selectbox.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0 auto;
            font: normal 14px Arial, Tahoma, sans-serif;
            color: #333;
        }

        h1 {
            font-size: 25px;
            font-weight: normal;
            line-height: 1.1;
            margin: 40px 0;
            text-align: center;
        }

        a {
            color: #0094D6;
        }

        p {
            margin: 0 0 15px;
        }

        .section {
            padding: 10px;
            border: 1px solid #DDD;
            display: inline-block;
            margin: 100px;
            margin-left: 300px;
        }

        .nowidth .selectbox .select,
        .nowidth .selectbox .dropdown {
            width: auto;
        }

        .maxheight .selectbox .dropdown {
            max-height: 203px;
        }

        button {
            height: 32px;
            margin: 0 6px 0 0;
            padding: 0 11px;
            overflow: visible;
            outline: none;
            border: 1px solid #ccc;
            border-bottom-color: #b3b3b3;
            border-radius: 4px;
            background: #F1F1F1;
            box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0, 0, 0, 0.1);
            font: 14px/30px Arial, Tahoma, sans-serif;
            text-shadow: 1px 1px #FFF;
            color: #333;
            cursor: pointer;
        }

        button::-moz-focus-inner {
            border: 0;
            padding: 0
        }

        button:hover {
            background-color: #E6E6E6;
            background-position: 0 -10px;
        }

        button:active {
            background: #f5f5f5;
            box-shadow: inset 1px 1px 3px #DDD;
        }
    </style>

    <script>
        (function ($) {
            $(function () {

                $('select').selectbox();

                $('#add').click(function (e) {
                    $(this).parents('div.section').append('<br /><br /><select><option>-- Выберите --</option><option>Пункт 1</option><option>Пункт 2</option><option>Пункт 3</option><option>Пункт 4</option><option>Пункт 5</option></select>');
                    $('select').selectbox();
                    e.preventDefault();
                })

                $('#add2').click(function (e) {
                    var options = '';
                    for (i = 1; i <= 5; i++) {
                        options += '<option>Option ' + i + '</option>';
                    }
                    $(this).parents('div.section').find('select').each(function () {
                        $(this).append(options);
                    })
                    $('select').trigger('refresh');
                    e.preventDefault();
                })

                $('#che').click(function (e) {
                    $(this).parents('div.section').find('option:nth-child(5)').attr('selected', true);
                    $('select').trigger('refresh');
                    e.preventDefault();
                })

            })
        })(jQuery)
    </script>
</head>

<body>

<div class="section">
    <select>
        <option>-- Выберите --</option>
        <option>Пункт 11</option>
        <option>Пункт 12</option>
        <option>Пункт 13</option>
        <option>Пункт 14</option>
        <option>Пункт 15</option>
        <option>Пункт 16</option>
        <option>Пункт 17</option>
        <option>Пункт 18</option>
        <option>Пункт 19</option>
        <option>Пункт 20</option>
        <option>Пункт 21</option>
        <option>Пункт 22</option>
    </select>
</div>

</body>
</html>